<template>
  <div class="time">
    <el-tag style="display: inline-block;vertical-align: top;">{{tags?tags:'时间'}}</el-tag>
    <el-date-picker
      type="datetimerange"
      size="small"
      v-model="timeChange"
      :editable="false"
      range-separator="~"
      value-format="yyyy-MM-dd HH:mm:ss"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      :style="{'margin-left':'-7px','width':width}"
      :default-time="['00:00:00', '23:59:59']"
      @change="getValue()"      
    ></el-date-picker><!-- :picker-options="pickerOptions" -->
  </div>
</template>
<script>
import moment from 'moment';
export default {
  props: ["dataTime", "width", "tags"],
  data() {
    return {
      timeChange: this.dataTime.length > 0 ? this.dataTime : [], //改变dateTime的值，会报警告，这里重新定义变量赋值   this.dataTime.length > 0 ? this.dataTime : [startMon, endMon]
    };
  },
  watch: {
      //监听传过来的值，随时赋值
    dataTime(val) {
      if(val==null){
        this.timeChange = [];
      }else{
        this.timeChange = val.length>0?[val[0], val[1]]:[];
      }
    }
  },
  mounted() {
    this.getValue();
    // console.log("this.dataTime+", this.dataTime);
  },
  methods: {
    getValue() {
      this.$emit("timeClick", this.timeChange);
    }
  }
};
</script>
<style lang="scss" scoped>
.time{
  margin-right: 20px;
}
.el-tag {
  background: #ffffff;
  border: 1px solid #dcdfe6;
}
</style>

